<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册</title>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/register.css">
    <script src="../js/jquery-1.10.1.min.js"></script>
    <script src="../js/interface.js"></script>
</head>

<body>
    <div class="header">
        <div class="w clearfix">
            <ul class="headLeft">
                <li class="tips">
                    <a href="./login.html" class="login">亲，请登录</a>
                    <a href="javascript:;" class="regist">免费注册</a>
                </li>
                <li>
                    <a href="javascript:;" class="mobile">手机逛淘宝</a>
                </li>
            </ul>
            <ul class="headRight">
                <li class="taoIndex">
                    <a href="./index.html">淘宝网首页</a>
                </li>
                <li class="myTaobao">
                    <a href="javascript:;">我的淘宝</a>
                    <i></i>
                    <ul class="subNav">
                        <li>我的足迹</li>
                        <li>已买到的宝贝</li>
                        <li>爱逛街</li>
                        <li>淘宝达人</li>
                        <li>新欢</li>
                    </ul>
                </li>
                <li class="shopCar">
                    <i class="icon"></i>
                    <a href="javascript:;">购物车</a>
                    <i></i>
                </li>
                <li>
                    <i></i>
                    <a href="javascript:;">收藏夹</a>
                    <i></i>
                </li>
                <li>
                    <a href="javascript:;">商品分类</a>
                </li>
                <li class="separated">
                    <span>|</span>
                </li>
                <li>
                    <a href="javascript:;">卖家中心</a>
                    <i></i>
                </li>
                <li>
                    <a href="javascript:;">联系客服</a>
                    <i></i>
                </li>
                <li>
                    <a href="javascript:;">网站导航</a>
                    <i></i>
                </li>
            </ul>
        </div>
    </div>

    <div class="logo w clearfix">
        <h1><a href="index1.html"><i class="iconfont icon">&#xe61b</i></a></h1>
        <p>用户注册</p>
    </div>

    <div class="formContent">
        <div class="regist">
            <label for=""><span>*</span>用户名:</label>
            <div class="formDiv">
                <input type="text" class="user" name="" id="" placeholder="请设置用户名">
                <div class="prompts">
                    <p>· 5-25个字符，可以包含字母或汉字</p>
                    <p>· 请勿包含身份证/银行卡等隐私信息，一旦设置成功无法修改</p>
                    <div class="triangle"><img src="../images/sanjiao.png" alt=""></div>
                </div>
            </div>
        </div>
        <div class="tips">
            <p>请输入用户名</p>
        </div>
        <div class="regist">
            <label for=""><span>*</span>邮箱:</label>
            <div class="formDiv">
                <input type="text" class="email" name="" id="" placeholder="请设置邮箱">
            </div>
        </div>
        <div class="tips">
            <p>请设置邮箱</p>
        </div>
        <div class="regist">
            <label for=""><span>*</span>手机号码:</label>
            <div class="formDiv">
                <select name="" id="" class="prePhone">
                    <option value="86">中国大陆&emsp;&emsp;+86</option>
                    <option value="86">中国大陆&emsp;&emsp;+86</option>
                    <option value="86">中国大陆&emsp;&emsp;+86</option>
                    <option value="86">中国大陆&emsp;&emsp;+86</option>
                    <option value="86">中国大陆&emsp;&emsp;+86</option>
                </select>
                <input type="text" class="phone" name="" id="" placeholder="请输入手机号">
            </div>
        </div>
        <div class="tips">
            <p>手机号不能为空</p>
        </div>
        <div class="regist">
            <label for=""><span>*</span>登录密码:</label>
            <div class="formDiv">
                <input type="text" class="pwd" name="" id="" placeholder="请设置密码">
                <div class="prompts">
                    <p><i class="iconfont icon1">&#xe61f</i> 6-20个字符，密码不能是相同的用户名</p>
                    <p><i class="iconfont icon2">&#xe61f</i> 只能包含字母、数字及某些字符符号(如$,_)</p>
                    <p><i class="iconfont icon3">&#xe61f</i> 字母、数字和$_至少包含2种</p>
                    <div class="triangle"><img src="../images/sanjiao.png" alt=""></div>
                </div>
            </div>
        </div>
        <div class="tips">
            <p>请设置登录密码</p>
        </div>

        <div class="agreement">
            <label for=""></label>
            <div class="regAgreement">
                <p>已阅读并同意以下协议<a href="#">淘宝平台服务协议</a>、<a href="#">隐私权政策</a>、<a href="">法律声明</a>、<a
                        href="#">支付宝及客户端服务协议</a>、<a href="#">支付宝隐私权政策</a></p>
            </div>
        </div>
        <div class="submit">
            <label for=""></label>
            <div class="regBtn">
                <a href="#" class="btn">同意并注册</a>
            </div>
        </div>
    </div>
</body>

<script>
    var isUserOk = false;
    var isEmailOk = false;
    var isPwdOk = false;
    var isPhoneOk = false;
    $(".formContent input").focus(function () {
        $(this).parent().css({ border: "1px solid #ff6000" });
    })
    $(".formContent input").blur(function () {
        $(this).parent().css({ border: "1px solid #dddddd" });
    })

    $(".user").focus(function () {
        $(this).next().css({ display: "block" });
    })
    $(".pwd").focus(function () {
        $(this).next().css({ display: "block" });
    })
    $(".pwd").blur(function () {
        $(this).next().css({ display: "none" });
        var re = pwdHandler();
        if (re) {
            $(this).parent().css({ border: "1px solid #dddddd" });
        } else {
            $(this).parent().css({ border: "1px solid #ff0000" });
            $(this).parents(".regist").next().html("请设置登录密码").css({ display: "block", color: "red" });
        }
    })
    userHandler();
    emailHandler();
    phoneHandler();
    pwdHandler();


    //用户名
    function userHandler() {
        $(".user").blur(async function () {
            $(this).next().css({ display: "none" });
            var reg = /^[a-zA-Z\d_$]{5,25}$/;
            if ($(this).val().length > 0) {
                if (reg.test($(this).val())) {
                    var user = $(this).val();
                    var result = await isExistUser({ user });
                    var { status, msg } = result;
                    if (status) {
                        isUserOk = true;
                        $(this).parents(".regist").next().html("√").css({ display: "block", color: "green" });
                        $(this).parent().css({ border: "1px solid #dddddd" });
                    } else {
                        $(this).parents(".regist").next().html(msg).css({ display: "block", color: "red" });
                        $(this).parent().css({ border: "1px solid #ff0000" });
                    }
                } else {
                    var str = "5-25个字符，可以包含字母或汉字"
                    $(this).parents(".regist").next().html(str).css({ display: "block", color: "red" });
                    $(this).parent().css({ border: "1px solid #ff0000" });
                }
            } else {
                $(this).parents(".regist").next().html("请输入用户名").css({ display: "block" });
                $(this).parent().css({ border: "1px solid #ff0000" });
            }
        })
    }

    //邮箱
    function emailHandler() {
        $(".email").blur(async function () {
            var reg = /^\w+@\w+\.(com|cn|email)$/;
            var email = $(this).val();
            if (email.length > 0) {
                if (reg.test(email)) {
                    var result = await isExistEmail({ email });
                    var { status, msg } = result;
                    if (status) {
                        $(this).parents(".regist").next().html("√").css({ display: "block", color: "green" });
                        $(this).parent().css({ border: "1px solid #dddddd" });
                        isEmailOk = true;
                    } else {
                        $(this).parents(".regist").next().html(msg).css({ display: "block", color: "red" });
                        $(this).parent().css({ border: "1px solid #ff0000" });
                    }
                } else {
                    $(this).parents(".regist").next().html("邮箱格式不正确").css({ display: "block", color: "red" });
                    $(this).parent().css({ border: "1px solid #ff0000" });
                }
            } else {
                $(this).parents(".regist").next().html("请设置邮箱").css({ display: "block" });
                $(this).parent().css({ border: "1px solid #ff0000" });
            }
        })
    }

    //手机号
    function phoneHandler() {
        $(".phone").blur(async function () {
            var reg = /^1(3|4|5|7|8|9)\d{9}$/;
            var phone = $(this).val();
            if (phone.length > 0) {
                if (reg.test(phone)) {
                    var result = await isExistPhone({ phone });
                    var { status, msg } = result;
                    if (status) {
                        $(this).parents(".regist").next().html("√").css({ display: "block", color: "green" });
                        $(this).parent().css({ border: "1px solid #dddddd" });
                        isPhoneOk = true;
                    } else {
                        $(this).parents(".regist").next().html(msg).css({ display: "block", color: "red" });
                        $(this).parent().css({ border: "1px solid #ff0000" });
                    }
                } else {
                    $(this).parents(".regist").next().html("手机号码不正确").css({ display: "block", color: "red" });
                    $(this).parent().css({ border: "1px solid #ff0000" });
                }
            } else {
                $(this).parents(".regist").next().html("手机号不能为空").css({ display: "block" });
                $(this).parent().css({ border: "1px solid #ff0000" });
            }
        })
    }

    //密码
    function pwdHandler() {
        $(".pwd").on("input", this, function () {
            var pwd = $(this).val();
            if (pwd.length > 0) {
                var isIcon1 = false;
                var isIcon2 = false;
                var isIcon3 = false;
                var lenReg = /^\w{6,20}$/;
                var talReg = /^[a-zA-Z\d_$]+$/;
                if (lenReg.test(pwd)) {
                    $(this).next().children("p").children(".icon1").html("&#xe617").css({ color: "green" });
                    isIcon1 = true;
                } else {
                    $(this).next().children("p").children(".icon1").html("&#xe61f").css({ color: "red" });
                }
                if (talReg.test(pwd)) {
                    $(this).next().children("p").children(".icon2").html("&#xe617").css({ color: "green" });
                    isIcon2 = true;
                }
                var isExistNum = false;
                var isExistLetter = false;
                var isExistSpe = false;

                if (/[\d]/.test(pwd)) isExistNum = true;
                if (/[a-zA-Z]/.test(pwd)) isExistLetter = true;
                if (/[_$]/.test(pwd)) isExistSpe = true;

                var sum = isExistNum + isExistLetter + isExistSpe;

                if (sum >= 2) {
                    $(this).next().children("p").children(".icon3").html("&#xe617").css({ color: "green" });
                    isIcon3 = true;
                } else {
                    $(this).next().children("p").children(".icon3").html("&#xe61f").css({ color: "red" });
                }

                if (isIcon1 && isIcon2 && isIcon3) {
                    isPwdOk = true;
                    $(this).parents(".regist").next().css({ display: "none" });
                } else {
                    $(this).parents(".regist").next().html("密码设置不符合要求").css({ display: "block", color: "red" });
                }
            } else {
                $(this).next().children("p").children().html("&#xe61f").css({ color: "red" });
            }
        })
        return isPwdOk;
    }

    //同意注册
    $(".btn").click(async function () {
        if (isUserOk && isPwdOk && isPhoneOk && isEmailOk) {
            var user = $(".user").val();
            var pwd = $(".pwd").val();
            var phone = $(".phone").val();
            var email = $(".email").val();
            var result = await register({ user, pwd, phone, email });
            var { status, msg } = result;
            if (status) {
                location.href = "./login.html";
            }
        } else {
            $(".formDiv").css({ border: "1px solid #ff0000" });
            $(".tips").css({ display: "block" });
        }
    })
</script>

</html>